<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <title>电商网站</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar-inverse" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapse" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="ecommerce.html">LYRPX</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">


                <li class="dropdown">
                    <a href="#" class="active dropdown-toggle" data-toggle="dropdown">全部商品分类<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="category.html">游戏笔记本</a></li>
                        <li><a href="category.html">创意设计本</a></li>
                        <li><a href="category.html">电竞主机</a></li>
                        <li><a href="category.html">设计主机</a></li>
                        <li><a href="category.html">电竞显示屏</a></li>
                        <li><a href="category.html">智潮外设</a></li>
                        <li><a href="category.html">电竞健康</a></li>
                        <li><a href="category.html">品牌日专享</a></li>
                        <li><a href="category.html">腹肌哥外设</a></li>
                        <li class="divider"></li>
                        <li><a href="category.html">全部商品分类</a></li>
                    </ul>
                </li>
                <li><a href="#">LINK</a></li>
                <li><a href="#">LINK</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#">
                        <span class="badge pull-right">16</span>
                        <i class="glyphicon glyphicon-shopping-cart"></i>
                    </a>
                </li>
                <li>
                    <a href="account.html">
                        <i class="glyphicon glyphicon-user"></i>
                    </a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#myModal">登录</a>
                </li>
            </ul>
        </div>
    </div>

</nav>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLable" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">关闭</span>
                </button>
                <h2 class="modal-title" id="myModalLabel">登录</h2>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="手机号码" required autofocus/>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="密码" required/>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="remmber-me"/>记住用户名
                        </label>
                        <label>
                            <input type="checkbox" value="remmber-me"/>记住密码
                        </label>
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                    <br/>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3">
            <h3>产品目录</h3>
            <div class="list-group">
                <a href="category.html" class="list-group-item">游戏笔记本</a>
                <a href="category.html" class="list-group-item">创意设计本</a>
                <a href="category.html" class="list-group-item">电竞主机</a>
                <a href="category.html" class="list-group-item">设计主机</a>
                <a href="category.html" class="list-group-item">电竞显示屏</a>
                <a href="category.html" class="list-group-item">智潮外设</a>
                <a href="category.html" class="list-group-item">电竞健康</a>
                <a href="category.html" class="list-group-item">品牌日专享</a>
                <a href="category.html" class="list-group-item">腹肌哥外设</a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="thumbnail">
                <div class="row">
                    <div class="col-sm-6">
                        <img class="img-responsive" src="img/1%20(1).jpg" alt="" height="300px" width="500px"/>
                        <div class="thumbnail row">
                            <div class="col-xs-3">
                                <a href="#"></a>
                                <img src="img/1%20(2).jpg" alt="" class="img-thumbnail img-responsive"/>
                            </div>
                            <div class="col-xs-3">
                                <a href="#"></a>
                                <img src="img/1%20(3).jpg" alt="" class="img-thumbnail img-responsive"/>
                            </div>
                            <div class="col-xs-3">
                                <a href="#"></a>
                                <img src="img/1%20(4).jpg" alt="" class="img-thumbnail img-responsive"/>
                            </div>
                            <div class="col-xs-3">
                                <a href="#"></a>
                                <img src="img/1%20(5).jpg" alt="" class="img-thumbnail img-responsive"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <h4 class="pull-right">$999</h4>
                        <h4><a href="#">产品名称</a></h4>
                        <p>Apple 苹果13Pro (A2639) iPhone 13Pro 全网通 5G手机 256GB 银色</p>
                        <form role="form">
                            <div class="number form-group">
                                <label class="control-label" for="number">数量</label>
                                <input type="number" class="form-control input-sm" id="number"/>
                            </div>
                            <div class="form-group">
                                <label>颜色</label>
                                <select id="color">
                                    <option name="color">银色</option>
                                    <option name="color">金色</option>
                                    <option name="color">石墨色</option>
                                    <option name="color">远峰蓝</option>
                                    <option name="color">苍岭绿</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>内存</label>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">64GB</button>
                                    <button type="button" class="btn btn-default">128GB</button>
                                    <button type="button" class="btn btn-default">256GB</button>
                                    <button type="button" class="btn btn-default">512GB</button>
                                    <button type="button" class="btn btn-default">1T</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn btn-default">联系商家</button>
                                <button type="submit" class="btn btn-success">添加到购物车</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="description">
                    <p>热评一万+，【国行正品，全新未拆封未激活】20点前下单，当天发！限时领180劵下单</p>
                    <p>热评一万+，【国行正品，全新未拆封未激活】20点前下单，当天发！限时领180劵下单</p>
                    <p>热评一万+，【国行正品，全新未拆封未激活】20点前下单，当天发！限时领180劵下单</p>
                </div>
                <div class="ratings">
                    <p class="pull-right">3 reviews</p>
                    <p>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star-empty"></span>
                        4.0 stars
                    </p>
                </div>
                <div class="well">
                    <div class="text-right"><a class="btn btn-success">添加评论</a></div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <hr/>
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy;<a href="index.html">jQuery&前段UI框架课堂</a>2020</p>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>
